<template>
    <scroller class="body">
        <panel title="首页" type="primary">
            <panel title="轮播图" padding-body="0">
                <slider class="slider" append="tree"
                :interval="sliders[0].interval"
                :autoPlay="sliders[0].autoPlay">
                    <indicator class="indicator"></indicator>
                    <!-- <slider-page v-for="(v,i) in sliders[0].sliderPages" :items="v.items" :key="i"></slider-page> -->
                    <slider-page v-for="(adImg,i) in adImgList" :items="adImg" :key="i"></slider-page>
                </slider>
            </panel>
            <panel title="用户列表" padding-body="0">
                <text v-for="(user,i) in userList">用户名：{{user.user}} 密码：{{user.password}}</text>
            </panel>
        </panel>
    </scroller>
</template>

<script>
var img0 = '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg';
var img1 = '//gw.alicdn.com/tps/i1/TB1M3sQMpXXXXakXXXXApNeJVXX-360-360.png';
var img2="//192.168.1.109:8080/bobby/imageDir/a17.jpg";
var utils = require('../utils/utils.js');
var api = require('../api/api.js');
module.exports = {
    data: function () {
        return {
        eventCnt: 0,
        togglePlayMsg: 'pause',
        adImgList:[],
        userList:[],
        sliders: [{
            interval: 3000,
            autoPlay: true,
            sliderPages: [
            {
                items: [
                {
                    image: img0,
                    link: '//h5.m.taobao.com/1'
                },
                {
                    image: img0,
                    link: '//h5.m.taobao.com/1'
                }
                ]
            },
            {
                items: [
                {
                    image: img1,
                    link: '//h5.m.taobao.com/1'
                },
                {
                    image: img1,
                    link: '//h5.m.taobao.com/1'
                }
                ]
            },
            {
                items: [
                {
                    image: img0,
                    link: '//h5.m.taobao.com/1'
                },
                {
                    image: img1,
                    link: '//h5.m.taobao.com/1'
                }
                ]
            }
            ]
        }]
        }
    },
    created:function(){
        this.baseURL = utils.getBaseURL();
        this.baseURL="http://192.168.1.109:8080/bobby/home/";
        utils.log('base url: '+this.baseURL);
        this.getList(this.baseURL+"GetHomeAdImgList.do");
        this.getUser(this.baseURL+"showUser")
    },
    components: {
      panel: require('../include/panel.vue'),
      sliderPage: require('../include/slider-page.vue')
    },
    methods: {
        getList:function(url){
            var self = this;
            api.doPost(url,function(data){
                utils.log('data: '+JSON.stringify(data));
                if(!!data && data.length > 0){
                        data.forEach(function(element) {
                        var items=[];
                        var item = {};
                        item.name = element.name;
                        item.link = '//gitee.com/gubojun';
                        item.image = "//192.168.1.109:8080/bobby/"+element.imgurl+'/'+element.name;
                        utils.log('imageurl: '+item.image);
                        items.push(item);
                        self.adImgList.push(items);
                        });
                }else{
                    // this.nomore = true;
                }
            });
        },
        getUser:function(url){
            var self = this;
            api.doGet(url,function(data){
                utils.log('data: '+JSON.stringify(data));
                if(!!data && data.length > 0){
                    data.forEach(function(element) {
                        var item = {};
                        item.password = element.password;
                        item.sign = element.sign;
                        item.token = element.token;
                        item.user = element.user;
                        self.userList.push(item);
                    });
                }
            });
        },
        togglePlay: function() {
            var autoPlay = this.sliders[0].autoPlay
            autoPlay = !autoPlay
            this.sliders[0].autoPlay = autoPlay
            this.togglePlayMsg = autoPlay ? 'pause' : 'play'
        },
        handleSliderChange: function() {
            var nowCnt = this.eventCnt + 1
            this.eventCnt = nowCnt
        },
        setInterval1: function() {
            this.sliders[0].interval = 1000;
        },
        setInterval3: function() {
            this.sliders[0].interval = 3000;
        },
        setInterval5: function() {
            this.sliders[0].interval = 5000;
        }
    }
};
</script>

<style scoped>
.body {
    background-color: #ffffff;
}

.slider {
    flex-direction: row;
    background-color: #7c83db;
    /*margin-left: 18;*/
    /*margin-right: 18;*/
    width: 690px;
    height: 360px;
}

.indicator {
    position: absolute;
    width: 690px;
    height: 420px;
    top: 140px;
    left: 240px;
    itemColor: #dddddd;
    itemSelectedColor: rgb(40, 96, 144);
}
</style>